<template>
  <view class="training-calendar">
    <view class="header">
      <text class="title">我的训练日记</text>
      <view class="more" @tap="navToTrainingLog">
        <image
          class="daka"
          :src="commonStore.baseImageUrl + 'test-yujia/mine/daka.png'"
        >
        </image>
        <!-- <text>生成训练海报</text>
          <text class="share">分享</text> -->
      </view>
    </view>

    <scroll-view scroll-x class="calendar-scroll" show-scrollbar="false">
      <view class="days">
        <view
          class="day-item"
          v-for="(item, index) in weekDays"
          :key="index"
          :class="{ active: item.isToday }"
        >
          <text class="week">{{ item.weekDay }}</text>
          <text class="date">{{ item.date }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { useCommonStore } from "@/store";

const commonStore = useCommonStore();

const weekDays = ref([
  { weekDay: "今天", date: "9", isToday: true },
  { weekDay: "明天", date: "10", isToday: false },
  { weekDay: "后天", date: "11", isToday: false },
  { weekDay: "周二", date: "12", isToday: false },
  { weekDay: "周三", date: "13", isToday: false },
  { weekDay: "周四", date: "17", isToday: false },
  { weekDay: "周五", date: "18", isToday: false },
]);

const navToTrainingLog = () => {
  uni.navigateTo({ url: "/pages/subpackages/mineCenter/checke-in-center" });
};
</script>

<style lang="scss">
.training-calendar {
  background: rgba($color: #aad04a, $alpha: 0.63);
  border-radius: 20rpx;
  margin-top: 30rpx;
  padding: 30rpx;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .title {
      font-size: 30rpx;
      color: #8fb433;
    }

    .more {
      font-size: 24rpx;
      color: #666;
      display: flex;
      align-items: center;
      gap: 10rpx;
      .daka {
        width: 108rpx;
        height: 26rpx;
      }

      .share {
        color: #8cb22c;
      }
    }
  }

  .calendar-scroll {
    .days {
      display: flex;
      justify-content: space-between;

      .day-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10rpx;
        .week {
          font-size: 24rpx;
          color: rgba($color: #000000, $alpha: 0.5);
        }

        .date {
          font-size: 24rpx;
          color: rgba($color: #000000, $alpha: 0.5);
        }

        &.active {
          .week,
          .date {
            color: #000000;
          }
        }
      }
    }
  }
}
</style>
